<!--
 * @Author: 赵宇
 * @Description: 这是支付页面
 * @Date: 2024-02-15 23:45:33
 * @LastEditTime: 2024-09-09 21:09:27
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \dance\pages\pay\pay.vue
-->
<template>
  <view class="pay">
    <!-- 头部 -->
    <uv-status-bar></uv-status-bar>
    <!--自定义头部 -->
    <view class="pay-navbar">
      <view class="pay-navbar-arrow">
        <uv-icon name="arrow-left" color="#fff" size="59rpx" @click="onLeft"></uv-icon>
      </view>
      <view class="title">道具购买</view>
    </view>
    <view class="pay-content">
      <view class="pay-content-name">{{ httpData.name || '道具名称' }}</view>
      <view class="prop">
        <view class="prop-image">
          <uv-image :src="httpData.imagePath || defaultPropImg" height="100%" width="100%"></uv-image>
        </view>
        <view class="prop-info">
          <view class="prop-info-box">
            <view class="label">有效时长</view>
            <view class="data">{{ httpData.usefulMonth }} </view>
            (月)
          </view>
          <view class="prop-info-box">
            <view class="label">单月上限</view>
            <view class="data">{{ httpData.monthly > 99999 ? '无上限' : httpData.monthly }}</view>
            (去卡豆)
          </view>
          <view class="prop-info-box">
            <view class="label">总数</view>
            <view class="data">{{ httpData.upperLimit > 99999 ? '无上限' : httpData.upperLimit }}</view>
            (去卡豆)
          </view>
          <view class="prop-info-box">
            <view class="label">适用商户</view>
            <view>{{ httpData?.merchant?.name }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="pay-footer">
      <view class="pay-footer-total">
        <text class="total">合计：</text>
        <text class="number">
          <text class="decimal">￥</text>
          <text>{{ httpData.amount / 100 }}</text>
        </text>
      </view>
      <view class="pay-footer-btn" @click="httpPay">{{ os ? 'iOS功能暂不可用' : '微信支付' }}</view>
    </view>
    <uv-safe-bottom></uv-safe-bottom>
    <uv-toast ref="toastRef"></uv-toast>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';
  import { onLeft, toastFn } from '@/common/js/fn.js';
  import { computed, reactive, ref } from 'vue';
  import { defaultPropImg } from '@/common/js/global.js';
  const toastRef = ref();
  let os = ref(uni.$uv.os() === 'ios');
  let routerVal = reactive({
    id: ''
  });
  let httpData = ref({});
  // 获取远程数据
  onLoad(async option => {
    routerVal.id = Number(option.id);
    httpProp();
  });
  const httpProp = async () => {
    let data = await uni.$uv.http.post('app/package_offer/detail', {
      id: routerVal.id
    });
    httpData.value = data;
  };
  // 支付
  const httpPay = async () => {
    if(os.value) {
      toastFn(toastRef.value, '由于相关规范，iOS功能暂不可用', 'error');
      return;
    }
    let data = await uni.$uv.http.post('app/package_offer/purchase', {
      goodsID: routerVal.id,
      goodsType: 'PackageOffer'
    });
    let options = {
      provider: 'wxpay',
      timeStamp: data.timeStamp,
      nonceStr: data.nonceStr,
      package: `prepay_id=${data.prepay_id}`,
      signType: 'RSA',
      paySign: `${data.paySign}`,
      _debug: 1,
      success: function (res) {
        toastFn(toastRef.value, '支付成功，2s后自动返回', 'success');
        setTimeout(() => {
          onLeft();
        }, 2000);
      },
      fail: function (err) {}
    };
    uni.requestPayment(options);
  };
</script>

<style lang="scss" scoped>
  .pay {
    background-color: #1d1f24;
    height: 100vh;
    color: #fff;
    box-sizing: border-box;
    &-navbar {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 136rpx;
      position: relative;
      flex-shrink: 0;
      &-arrow {
        position: absolute;
        top: 50%;
        left: 26rpx;
        transform: translate(0, -50%);
        z-index: 999;
        height: 91rpx;
        width: 91rpx;
        box-shadow: 0px 0px 0px 0.2px #aaaaaa;
        background-color: rgba(0, 0, 0, 0.16);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .title {
        font-size: 42rpx;
        color: #fff;
        font-weight: bold;
      }
    }

    &-content {
      border-radius: 19rpx;
      overflow: hidden;
      background-color: #535355;
      margin: 63rpx 26rpx 0;
      padding: 35rpx 40rpx;
      &-name {
        font-size: 42rpx;
        font-weight: bold;
        margin-bottom: 35rpx;
      }
      .prop {
        display: flex;
        &-image {
          height: 326rpx;
          width: 262rpx;
          border-radius: 19rpx;
          overflow: hidden;
        }
        &-info {
          margin-left: 31rpx;
          flex: 1;
          color: #b1b1b1;
          font-size: 24rpx;
          &-box {
            display: flex;
            margin-bottom: 23rpx;
            .label {
              width: 131rpx;
            }
            .data {
              width: 70rpx;
            }
          }
        }
      }
    }
    &-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 141rpx;
      border-top: 1px solid #545454;

      &-total {
        margin-right: 45rpx;
        .total {
          font-size: 26rpx;
          font-weight: bold;
          color: #fff;
        }
        .number {
          color: #ffcb68;
          font-size: 35rpx;
          font-weight: bold;
        }
        .decimal {
          font-weight: 200;
          font-size: 21rpx;
        }
      }

      &-btn {
        padding: 0 34rpx;
        height: 91rpx;
        line-height: 91rpx;
        text-align: center;
        background-color: #ffcb68;
        border-radius: 215rpx;
        font-size: 35rpx;
        color: #393939;
        margin-right: 44rpx;
      }
    }
  }
</style>
